
#prefs, #room-info {
	margin: 5px;
}

#left, #right, #center {
	position: fixed;
}

#left {
	top:0; left:0; bottom:0;
	width: $left-panel-width;
	background: $left-background;
	overflow-y: auto;
}
#center {
	@include flexbox(row);
	top:0;
	bottom: 0;
	box-shadow: $center-shadow;
	z-index: 2;
}
#right {
	top:0; right:0; bottom:0;
	width: $right-panel-width;
	background: $right-background;
	overflow-y: auto;	
	overflow-x: hidden;
}

@media (max-width: 1300px) {
	#left {
		width: 110px;
	}
	#right {
		width: 280px;
	}
	#center {
		left: 110px;
		right: 280px;
	}
}
@media (min-width: 1300px) {
	#left {
		width: $left-panel-width;
	}
	#right {
		width: $right-panel-width;
	}
	#center {
		left: $left-panel-width;
		right: $right-panel-width;
	}
}


#vert-center {
	@include flexbox(column);
	height: 100%;
	@include flex(1 0 0);
	min-width: 0;
}

#message-scroller {
	overflow-y: scroll;
	overflow-x: hidden; // prevents Chrome from having an horizontal scrollbar here
	@include flex(1 0 0);
}
#notifications {
	@include flex-grow(0);
}

.table {
	display: table;
	width:100%;
	height:100%;
	table-layout: fixed;
}
section {
	margin: 0 0 8px 0;
}

#prefs {
	padding: 4px;
	text-align: center;
	.pref {
		line-height: 180%;
	}
	button {
		margin-bottom: 8px;
	}
}
#users {
	padding-top: 2px;
	height: 95%;
	@include flexbox(column);
	.user, .user.profiled {
		position: relative;
		@include flex(1 0 18px);
		max-height: 30px;
		cursor: pointer;
		@include flexbox(row, center);
		padding: 1px 5px;
		text-overflow: ellipsis;
		overflow: hidden;
		font-style: italic;
		font-size: 95%;
		span {
			color: $user-text-color-in-user-list;		
		}
		&.connected {
			span {
				font-style: normal;
				color: $connected-user-text-color-in-user-list;
			}
		}
	}
}
#pad #users {
	.user, .user.profiled {
		&:hover {
			background: $profile-bg;
		}
		&.connected {
			box-shadow: $connected-user-bg-color-in-user-list 200px 0 0 0 inset;
			transition: box-shadow 3s;
		}
		&.connected:hover {
			box-shadow: $profile-bg 200px 0 0 0 inset;
			transition: box-shadow 0;
		}
		box-shadow: $connected-user-bg-color-in-user-list 0 0 0 0 inset;
		transition: box-shadow 4s;
	}
}

body.pad #me {
	font-style: italic;
}

#messages {
	background: $message-list-bg;
}

#messages, .messages {
  	margin-top:0;
	vertical-align: top;
	position: relative;
	.message {
		margin: $message-margin;
		transition: background 0.6s;
		border-top: $message-normal-border-top;
		border-bottom: $message-normal-border-bottom;
		&.me {
			border-top: $message-me-normal-border-top;
			border-bottom: $message-me-normal-border-bottom;		
		}
		&.before-disrupt .content {
			border-bottom: $content-border-bottom-before-disrupt;
		}
		&.after-disrupt .content {
			border-top: $content-border-top-after-disrupt;
		}
		&:hover .content {
			background: $hovered-message-content-bg; // theme
		}
	}
	.rvis + .rnvis {
		border-top: $first-not-seen-top-border;
	}
}

body.mobile #message-scroller { // FIXME remove when mobile pad is mainstream
	position: fixed;
	top: 0;
	right: 0;
	bottom: $minput-height + 8px;
	left: 0;
	overflow-y: scroll;
	margin:0;
	padding: $mtab-height 0 0 0;
}

.user-messages {
	position: relative;
	margin-top: $user-messages-vmargin;
	margin-bottom: $user-messages-vmargin;
	border-top: $user-messages-border-top;
	border-bottom: $user-messages-border-bottom;
	padding: $user-messages-padding;
	&.me {
		background: $message-me-bg;
		border-top: $user-messages-me-border-top;
		border-bottom: $user-messages-me-border-bottom;
		.user {
			color: $message-me-user-color;			
		}
	}
	.user {
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		padding: $user-padding-in-message;
		width: 110px;
		z-index: 6;
		@include flexbox(row, center, center);
		background: $user-in-messages-bg;
		box-shadow: $user-color-shadow-in-messages;
		transition: box-shadow .3s;
		span {
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			min-height: 18px;
			color: $user-text-color-in-message;
		}
		&.bot {
			font-style: italic;
		}
		div.avatar { // no avatar available
			background: $no-avatar-bg;
		}
		//~ .avatar {
			//~ margin: 4px;
		//~ }
		border-right: $user-in-messages-border-right;
	}
	&:hover .user {
		border-right: $hovered-user-in-messages-border-right;	
		box-shadow: $hovered-user-color-shadow-in-messages;
		transition: box-shadow .3s;
	}
	.user.profiled, &:hover .user.profiled {
		border-right: none;	
	}
	.user {
		.avatar-wrapper {
			width: 16px;
			height: 16px;
			.avatar {
				max-width: 100%;
				max-height: 100%;
				height: auto;
			}
		}
	}
	.user.size1 {
		.avatar-wrapper {
			width: 20px;
			height: 20px;
			margin-right: 2px;
		}
	}
	.user.size2 {
		.avatar-wrapper {
			width: 26px;
			height: 26px;
			margin-bottom: 2px;
		}
		span {
			width: 100%;
			text-align: center;
		}
		@include flex-direction(column);
	}
	.user.size3 {
		.avatar-wrapper {
			width: 40px;
			height: 40px;
			margin-bottom: 2px;
		}
		span {
			width: 100%;
			text-align: center;
		}
		@include flex-direction(column);
	}
	.user.size4 {
		.avatar-wrapper {
			width: 56px;
			height: 56px;
			margin-bottom: 2px;
		}
		span {
			width: 100%;
			text-align: center;
		}
		@include flex-direction(column);
	}
}

.message, #messages .error, .access_request {
	position: relative;
	.content, .rendered {
		border-radius: $message-content-border-radius;
		padding: $message-content-padding;
		background: $message-content-bg; 
		word-wrap: break-word;
		&.closed {
			max-height: 132px;
		}
		ul, ol {
			margin: 0;
		}
		input[type=checkbox] {
			vertical-align: middle;
		}
		pre + br, ul + br, ol + br {
			display: none;
		}
	}
}

.message .content, .rendered {
	min-width: 0;
	.box {
		background: $box-background;
		color: black;
		margin: 2px;
		border: thin solid #ddd;
		max-width: 100%;
		overflow-x: auto;
		h1 {
			margin: 10px;
			font-size: 120%;
			color: black;
		}
		img {
			max-width: 40%;
			height: auto;
		}
		.mainimg {
			margin: 5px;
			margin-right: 10px;
			float: left;
		}
		.txt {
		}
		&[href] {
			cursor: pointer;
		}
	}
	div.tablewrap {
		overflow-x: auto;		
		overflow-y: auto;
		display: inline-block;
		max-width: 100%;
		max-height: 55vh;
	}
	table {
		border-collapse: collapse;
		display: inline-table;
		margin: 5px 0;
		th, td {
			border: 1px solid $message-content-table-border-color;
			padding: 0 3px;
		}
		tr:nth-child(even) {
			background: rgba(120,120,120,.09);
		}
	}
	hr {
		width: 100%;
		height: 1px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: $message-normal-border-bottom;
		display: inline-block;
	}
}

.message.has-opener .content {
	padding-bottom: 12px;
}

#messages, .messages {
	.message, .error, .access_request {
		min-height: $message-min-height;
		@include flexbox(row, stretch);
		.user {
			@include align-self(stretch);
			@include flex(0 0 120px);
			@include flexbox(row, center);
		}
		.content {
			margin: $message-content-margin;
			line-height: $message-content-line-height;
			@include flex-grow($message-content-flex-grow);
			&.wide {
				@include flex-grow($message-wide-content-flex-grow);			
			}
		}
		.mdate {
			@include align-self(flex-start);
			@include flex(0 0 90px);
			text-align: right;
			font-size: 80%;
			padding: 2px;
		}
	}
}

.decorations {
	z-index: 7;
	@include flex(0 0 120px);
	@include flexbox(row, center, flex-end);
	button {
		text-align: center;
		padding: 0 3px;
		margin-right: 2px;
		&:last-child {
			margin-right: 12px;		
		}
		border-radius: $decoration-button-border-radius;
		box-shadow: $message-decoration-button-box-shadow;		
		font-size: 10px;
		line-height: 14px;
		overflow: hidden;
	}
	.decoration {
		font-family: "fontello";
		margin: 1px;
		@include flex(0 0 15px);
		cursor: default;
		color: $decoration-color;
		&.clickable {
			color: $decoration-clickable-color;
			cursor: pointer;
		}
	}
}
.message .decorations .decoration:last-child{
	margin-right: 10px;
}

#users .decorations {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.rendered {
	text-align: left;
}

.message.deleted .content {
	font-family: "fontello";
	color: $deleted-message-color;
	margin-right: 4px;
	font-size: 80%;
	a {
		color: $deleted-message-color;	
	}
	&::before {
		content: "\e80d  deleted";
	}
}

.content img, .rendered img {
	border: none;
	max-width: 100%;
	max-height: 130px;
	width: auto;
	cursor: pointer;
}

#search-results .content img, #notable-messages .content img, .messages .content img,
table.list .rendered img, .rooms-list .rendered img {
	max-height: 70px;
	max-width: 220px;
}

#room-description {
	padding: 5px;
	img {
		max-height: 75vh;
		&:first-child {
			display: block;
			margin: auto;
		}
	}
	font-size: 13px;
}

.message-menu {
	position: absolute;
	top: 0;
	right: 1px;
	background: $message-menu-bg;
	color: $message-menu-color;
	opacity: 0.85;
	font-size: 90%;
	.txt {
		color: $message-menu-txt-color;
	}
	.vote {
		font-family: "fontello";
		color: $message-menu-vote-color;
		margin: 0 4px;
		cursor: pointer;
		&.on {
			color: $message-menu-vote-on-color;
		}
		&:hover {
			color: $message-menu-vote-hover-color;
		}
	}
	.unpin {
		cursor: pointer;	
		margin: 0 4px;
	}
	.link, .makemwin {
		cursor: pointer;
		font-family: "fontello";
		color: $message-menu-link-color;
		margin: 0 4px;
		text-decoration: none;
	}
}
body.mobile .message-menu .vote {
	margin: 0 10px;
}
.message-votes {
	position: absolute;
	bottom: 7px;
	right: 1px;
	color: $message-votes-color;
	opacity: 0.6;
	font-size: 80%;
}
.nminfo {
	opacity: 0.7;
	font-size: 80%;
	padding-top: 2px;
}
.message-votes .vote, .nminfo .vote {
	font-family: "fontello";
	color: $message-votes-color;
	margin: 0 4px;
}
#notable-messages, #search-results {
	.message + .message {
		border-top: $side-message-border-top;		
	}
	.message {
		font-size: 12px;
		border-bottom: $side-message-border-bottom;	
		&:nth-child(even) {
			background: $side-message-even-background;
		}
		&:hover {
			background: $side-message-hover-bg;
			transition: background 0.2s;
		}
		&.selected {
			background: $side-message-selected-bg;		
			transition: background 0.2s;
		}
		cursor: pointer;
		padding: 7px;
		&.pin {
			font-size: 13px;
		}
	}
	.content {
		opacity: 0.9;
	}
	.closed {
		max-height: 48px;
	}
}
#notable-messages:empty:after {
	font-family: "fontello";
	content: "\e813 Pin or \e808 Star a message to move it here";
	font-size: 85%;
	opacity: .5;
	text-align: center;
	display: block;
	padding: 20px 0;
}

pre {
	overflow-x: auto;
	white-space: pre;
	word-wrap: normal;
	margin: 4px 4px 13px 4px;
}
code {
	font-family: monospace;
	color: $code-text-color;
}
.slashme {
	font-style:italic;
	color: $slashme-color;
}
.citation {
	border-left: medium solid $citation-border-color;
	margin-left: 15px;
	padding-left: 5px;
	display: inline-block;
}
.h1 {
	font-weight: bold;
	text-decoration: underline;
}
.h2 {
	text-decoration: underline;
}
.h3 {
	border-bottom: 1px dashed $h3-underline-color;
}
.h4 {
	border-bottom: 1px dotted $h4-underline-color;
}
.h5 {
	border-bottom: 1px dotted $h5-underline-color;
}

#input-panel {
	position: relative;
	background: $input-panel-bg-color;
	@include flex(0 0 ($input-height + 8px) );
	z-index: 10;
}
#autocompleter {
	position: absolute;
	top: -12px;
	left: 0;
	z-index: 11;
	span {
		background: $bg-color;
		margin: 4px;
		padding: 2px;
		border: thin solid #333;
		white-space: nowrap;
		cursor: pointer;
		&.selected {
			font-weight: bold;
		}
		&.special {
			font-style: italic;
		}
	}
}
#code-controls {
	position: absolute;
	font-size: 90%;
	top: -31px;
	left: 0;
	right: 0;
	height: 29px;
	z-index: 9;
	background: $bg-color;
	box-shadow: 0 -1px 1px black;
	padding: 2px 0 0 5px;
	@include flexbox(row, center);
	overflow: hidden;
	span.lang {
		margin: 4px;
		padding: 2px;
		border: thin dashed #888;
		white-space: nowrap;
		cursor: pointer;
		&.selected {
			background: rgba(255,255,255,.4);
			border: thin solid #666;
		}
		&:hover {
			background: rgba(255,255,255,.4);		
		}
	}
}
body.mobile #input-panel {
	display: block;
	position: fixed;
	bottom:0; left:0; right:0;
	height: $minput-height + 10px;
}
$input-buttons-width: 74px;
#input {
	width: calc(100% - 16px - #{$input-buttons-width}); 
	height: $input-height;
	margin-top: 1px;
	margin-left: 2px;
	resize: none; 
	float: left;
	background: $input-bg;
	color: $input-text-color;
	border-color: $input-border-color;
	border-width: 1px;
}
body.mobile #input {
	height: $minput-height;
}
#preview {
	width: calc(100% - 11px - #{$input-buttons-width});
	height: $input-height;
	float: left;
	word-wrap: break-word;
	background: $input-bg;
	overflow-y: auto;
	padding: 2px;
}
#input-panel button, #preview-panel button {
	width: $input-buttons-width;
	margin-top: 4px;
	margin-right: 2px;
	margin-bottom: -2px;
	text-align: center;
	padding: 0;
}
body.mobile #input-panel button {
	width: $input-buttons-width;
	height: $minput-height + 2px;
	margin-left: 4px;
	margin-top: 4px;
	text-align: center;
	padding: 0;
}
#preview-panel {
	background: $bg-color;
	width:100%;
	height: $input-height + 8px;
	@include flex-grow(0);
	display: none;
}
#upload-panel {
	background: $bg-color;
	width:100%;
	height: $input-height + 8px;
	flex-grow: 0;
	display: none;
	padding: 10px;
	text-align: center;
}
#upload-wait {
	@include flexbox(column, center, space-around);
}
h1 {
	color: $title-text-color;
	font-size: 125%;
	margin-top: 5px;
	margin-bottom: 5px;
	a {
		margin: 5px;
		text-decoration: none;	
	}
}
h2 {
	color: $title-text-color;
	font-size: 115%;
	margin-top: 2px;
	padding-top: 2px;
	margin-bottom: 2px;
	padding-left: 3px;
	a {
		text-decoration: none;	
		color: $title-text-color;
	}
}
h3 {
	color: $title-text-color;
	font-size: 110%;
}
p {
	padding: 4px;
	margin: 4px;
}
pre {
	font-family: Helvetica, arial, freesans, clean, sans-serif;
	font-size: 14px;
	margin-top: 2px;
	padding-left: 2px;
}

.error, #messages .user.error {
	color: red;
}
span.warning {
	color: orange;
}

#centerer {
	text-align: center;
	position: absolute;
	top:0;left:0;right:0;bottom:0;
	margin: 20px;
	&::before {
		content: '';
		display: inline-block;
		height: 100%; 
		vertical-align: middle;
	}
}
.centered {
	display: inline-block;
	vertical-align: middle;
	min-width:500px;
}

.closed {
	overflow: hidden;
}
.opener, .closer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 13px;
	text-align: center;
	cursor: pointer;
	color: $opener-closer-color;
	&:hover {
		color: $opener-closer-hover-color;
	}
}
.message .opener, {
	background: $opener-bg;
	&:hover {
		background: $opener-hover-bg;
	}
}
.opener::before {
	content: '▼';
}
.message .closer {
	background: $closer-bg;
	&:hover {
		background: $closer-hover-bg;
	}
}
.closer::before {
	content: '▲';
}

.reply {
	font-family: 'fontello';
	color: $reply-box-color;
	cursor: pointer;
	padding: 3px;
	border-radius: 2px;
	background: $reply-box-bg;
	opacity: 0.75;
	border-left-width: 1px;
	border-left-style: solid;
	margin-left: 1px;
	&:hover {
		background: $reply-box-hover-bg;
		opacity: 1;
	}
}
.message:hover .reply {
	margin-left: 0;
	border-width: 2px;
}

.message.goingto, .message.me.goingto {
	background: $goingto-bg;
	transition: background .2s;
}
.message .content, .rendered {
	a, a:visited {
		color: $message-link-color;
	}
}

body.home .list, .list {
	width: 100%;
	margin-bottom: 30px;
	border-spacing: 0;
	th, td {
		padding: 8px;
		background: $list-odd-cell-bg;
		text-align: left;
		color: $list-cell-color;
		a {
			color: $list-cell-color;		
			&:hover {
				color: $list-cell-hover-link-color;
			}
		}
	}
	tr:nth-child(even) {
		th, td {
			background: $list-even-cell-bg;
		}
	} 
	td.role {
		width: 45px;
	}
}

#auths-page {
	position: relative;
}
#roomButtons {
	text-align: center;
}
body.mobile #changeroom, body.mobile #editroom{
	float: inherit;
}
div#logo {
	background: $bg-color;
	margin: 0;
	padding: 3px;
}
div#notifs {
	color: #c2b0a8;
}

#response {
	color: #555;
}

.icon {
	font-family: "fontello";
}

// .private::before {
// 	font-family: "fontello";
// 	content:"\e814";
// 	margin-right: 3px;
// 	opacity: 0.7;
// 	padding-right: 1px;
// 	font-size: 70%;
// }
.notification {
	padding: 5px;
	background-color: $notifications-bg-color;
	color: $notification-text-color;
	.user {
		font-style:italic;
		z-index: 8;
		padding: 4px;
	}
	button {
		margin-left: 10px;
	}
	.remover {
		float: right;
	}
}
.pingroom {
	display: inline-block;
	margin-left: 5px;
	button {
		margin: 0;
		border-radius: 2px;
	}
	&:hover button {
		border-color: $button-hover-border-color;
	}
	.openroom, .nextping {
		z-index:2;
	}
	&:hover .openroom,
	&:hover .nextping {
		border-radius: 2px 0 0 2px;
	}
	.clearpings {
		visibility: hidden;
		margin-left: -1px;
		padding-left: 2px;
		padding-right: 2px;
	}
	&:hover .clearpings {
		visibility: visible;
		border-radius: 0 2px 2px 0;
	}
}

.olderLoader, .newerLoader {
	cursor: pointer;
	text-align: center;
	font-style:italic;
	font-size: 95%;
	opacity: 0.7;
	padding: 12px 0;
}
.newerLoader + .olderLoader {
	border-top:solid 7px #ccc;	
}

@media (max-height: 400px) {
	.dialog.intro {
		top: 10%;
	}
}
@media (min-height: 400px) and (max-height: 800px) {
	.dialog.intro {
		top: 170px;
	}
	body.logo {
		background: $logo-bg-color url(../../Miaou-300-f.png) center no-repeat;
		background-position: 50% 1px;
	}
}
@media (min-height: 800px) {
	.dialog.intro {
		top: 35%;
	}
	body.logo {
		background: $logo-bg-color url(../../Miaou-300-f.png) center no-repeat;
		background-position: 50% 100px;
	}
}

// light tabs of the right column of the chat
.tabs {
	display: table;
	width: 100%;
	table-layout: fixed;
	font-size: 13px;
	.tab {
		display: table-cell;
		text-align: center;
		padding: 8px;
		border-style:solid;
		border-color:  $chat-tabs-border-color;
		border-width: 0 0 $chat-tabs-border-width 0;
		border-radius: 0;
		color: transparentize($title-text-color, 0.5);
		cursor: pointer;
		font-weight: bold;
		&:hover {
			color: transparentize($title-text-color, 0.2);
		}
		background-image: $chat-tabs-unselected-bg-image;
		background-color: $chat-tabs-unselected-bg-color;
		&.selected {
			color: $title-text-color;
			background-image: $chat-tabs-selected-bg-image;
			background-color: $chat-tabs-selected-bg-color;
			border-width: $chat-tabs-border-width $chat-tabs-border-width 0 $chat-tabs-border-width;
			&:first-child {
				border-width: $chat-tabs-border-width $chat-tabs-border-width 0 0;
			}
			&:last-child	 {
				border-width: $chat-tabs-border-width 0 0 $chat-tabs-border-width;
			}
		}
	}
}
.page {
	width: 100%;
	display: none;
	&.selected {
		display: block;
	}
}
.pad .page.selected {
	background: $chat-page-selected-bg;
}


#searchInput {
	width: calc(100% - 12px);
	margin: 4px;
}

#search-next-page {
	text-align: center;
	height: 50px;
	cursor: pointer;
	padding-top: 10px;
}

.message .ping {
	background: $ping-bg;
	padding: 2px;
	border-radius: 3px;
	cursor: pointer;
	border-left-width: $ping-border-left-width;
	border-left-style: solid;
	&.ping-me {
		background: $ping-me-bg;
	}
}

